﻿<template>
  <div>
    <!-- 标题部分 -->
    <V-Title :titleName = 'titleName'></V-Title>
    <div class = 'page_mainContent' v-loading = 'loading'>
      <!-- 检索部分 -->
      <el-form label-width = '80px'>
        <el-row :gutter = '20'>
          <el-col :span = '8'>
            <el-form-item label = '页面名称:'>
              <el-input v-model = 'searchInfo.pageName' placeholder = '请输入需要检索的页面名称' clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span = '8'>
            <el-form-item label = '页面类型:'>
              <el-select v-model = 'searchInfo.pageCategory' placeholder = "请选择需要检索的页面类型" clearable>
                <el-option label = '普通页面' value = 'newPage'></el-option>
                <el-option label = 'tabbar页面' value = 'newBar'></el-option>
                <el-option label = '系统配置' value = 'systemPage'></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span = '4'>
            <el-button @click = 'getSearchData' type = 'primary'>检索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 表格部分 -->
      <div class = 'page_tableContent'>
        <el-table :data = 'tableData' style='width:100%' stripe border>
          <el-table-column align='center' v-for='(item) in tableColumn' :key = 'item.indexName' :label = 'item.text'
          :width = "(item.indexName === 'is_warnning' || item.indexName === 'is_error') ? '160px' : 'auto'">
            <template slot-scope='scope'>
              <span v-if = "item.indexName === 'is_warnning'" :class = "scope.row[item.indexName] ? '' : 'selfdefine_td_color'"
              :style = "{color: (scope.row[item.indexName] ? 'red' : '#333')}">{{scope.row[item.indexName] ? ('是(' + scope.row.warnning_msg + ')') : '否'}}</span>
              <span v-else-if = "item.indexName === 'is_error'" :class = "scope.row[item.indexName] ? '' : 'selfdefine_td_color'"
              :style = "{color: (scope.row[item.indexName] ? 'red' : '#333')}">{{scope.row[item.indexName] ? ('是(' + scope.row.error_msg + ')' ): '否'}}</span>
              <span v-else-if = "item.indexName === 'category'">
                {{scope.row[item.indexName] === 'newPage' ? '普通页面' : (scope.row[item.indexName] === 'newBar' ? 'tabbar页面' : (scope.row[item.indexName] === 'systemPage' ? '系统配置' : ''))}}
              </span>
              <span v-else :class = "scope.row.category === 'systemPage' ? '' : 'selfdefine_td_color'"
              :style = "{color: (scope.row.category === 'systemPage' ? '#0950f9' : '#333'), fontWeight: (scope.row.category === 'systemPage' ? 'bold' : 'normal')}">{{scope.row[item.indexName]}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width='280'>
            <template slot-scope="scope">
              <el-button type='text' @click = "handleSetting(scope.row)">配置设定<i class='iconfont icon-upload'></i></el-button>
              <el-button type='text' @click = "handleEdit(scope.row)">编辑<i class='iconfont icon-bianji' style = 'margin: 0 0 0 3px'></i></el-button>
              <!-- <el-button type='text' @click = "handlePreview(scope.row)">预览<i class='iconfont icon-yanj' style = 'margin: 0 0 0 3px'></i></el-button> -->
              <el-dropdown class='tableDropdown' @command = "handleCommand">
                <span class="el-dropdown-link">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown" class='dropdownMenu'>
                  <el-dropdown-item :command = "{'index': 2, 'rowData': JSON.stringify(scope.row)}">
                    <i class='iconfont icon-iconset0137'></i>校正错误
                  </el-dropdown-item>
                  <el-dropdown-item :command = "{'index': 3, 'rowData': JSON.stringify(scope.row)}">
                    <i class='iconfont icon-jilianxuanze'></i>忽略警告
                  </el-dropdown-item>
                  <el-dropdown-item :command = "{'index': 4, 'rowData': JSON.stringify(scope.row)}">
                    <i class='iconfont icon-shanchu'></i>删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部按钮和页码部分 -->
      <div class = 'page_bottomContent'>
        <div class = 'page_btnsContent'>
          <el-button type = "primary" @click = 'handleAdd ()'>添加页面</el-button>
          <el-button type = "primary" @click = 'handleCopy ()'>复制页面</el-button>
          <el-button type = "primary" @click = 'exportPageInfo.dialog = true'>导出页面</el-button>
          <el-button type = "primary" @click = 'importPageInfo.dialog = true'>导入页面</el-button>
        </div>
        <div class='page_paginationContent'>
          <el-pagination
            background
            @size-change = "handleSizeChange"
            @current-change = "handleCurrentChange"
            :current-page.sync = "currentPage"
            :page-size = 'pageSize'
            :pager-count = "5"
            :page-sizes = "[10, 25, 50, 100]"
            layout = "total, sizes, prev, pager, next"
            :total = 'totalLength'>
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 编辑和添加页面的弹窗 -->
    <el-dialog v-drag :title = 'dialogTitle' :visible.sync = 'dialogFormVisible' width='40%' @close = "closeDialog">
      <el-form :model = "ruleForm" ref="ruleForm" :label-width = 'labelWidth' :rules = 'rules' v-loading = 'loading'>
        <el-form-item label = "名称：" prop = 'name'>
          <el-input v-model = 'ruleForm.name' placeholder="请输入移动端页面名称"></el-input>
        </el-form-item>
        <el-form-item label = "描述：">
          <el-input v-model = 'ruleForm.desc' placeholder="请输入移动端页面描述" type = 'textarea' autosize></el-input>
        </el-form-item>
        <el-form-item label = "类别：" prop = 'category'>
          <el-select v-model = 'ruleForm.category' placeholder="请选择移动端页面类别" :disabled = "ruleForm.category === 'systemPage'" clearable>
            <el-option label = '普通页面' value = 'newPage'></el-option>
            <el-option label = 'tabbar页面' value = 'newBar'></el-option>
            <el-option label = '系统配置' value = 'systemPage' :disabled = 'hadSystemPage'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class = 'form_noLeftMargin'>
          <el-button type = "info" @click = "resetForm ('ruleForm')">取 消</el-button>
          <el-button type = "primary" @click = "submitForm ('ruleForm', operationType)">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 复制页面的弹窗 -->
    <el-dialog v-drag title = '复制页面' :visible.sync = 'copyFormVisible' width='40%' @close = 'closeCopyDialog'>
      <el-form :model = 'copyRuleForm' ref = 'copyRuleForm' :label-width = 'copyLabelWidth' :rules='copyRules' v-loading = 'loading'>
        <el-form-item label = '新页面名称：' prop = 'name'>
          <el-input v-model = 'copyRuleForm.name' placeholder = "请输入新增的移动端页面名称"></el-input>
        </el-form-item>
        <el-form-item label = '复制的页面：' prop = 'copyFormUid'>
          <el-select v-model = 'copyRuleForm.copyFormUid' placeholder = "请选择需要复制的移动端页面" clearable filterable>
            <el-option v-for = 'item in allCopyPages' :key = 'item.uid' :value = 'item.uid' :label = 'item.name'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label = "新页面描述：">
          <el-input v-model = 'copyRuleForm.desc' placeholder = "请输入新增的移动端页面描述" type = 'textarea' autosize></el-input>
        </el-form-item>
        <el-form-item label = "新页面类别：" prop = 'category'>
          <el-select v-model = 'copyRuleForm.category' placeholder="请选择新的移动端页面类别" clearable>
            <el-option label = '普通页面' value = 'newPage'></el-option>
            <el-option label = 'tabbar页面' value = 'newBar'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class = 'form_noLeftMargin'>
          <el-button type="info" @click = "resetCopyForm ('copyRuleForm')">取 消</el-button>
          <el-button type="primary" @click = "submitCopyForm ('copyRuleForm', operationType)">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 动态模板的页面配置弹窗 -->
    <el-dialog :title = 'settingDialog.title' :visible.sync = 'settingDialog.dialogVisible' :style = "{opacity: settingDialog.opacity}" :modal = 'settingDialog.modal'
    :width = "ruleForm.category === 'systemPage' ? '65%' : '95%'" class = 'main_dialog settingsDialog' :class = "settingDialog.modal ? '' : 'md_visiableFrame'"
    :close-on-click-modal = "false" :close-on-press-escape = "false" :before-close = 'closeSettingDialog'>
      <div>
        <!-- <iframe src = "http://192.168.3.6:8081/#/" ref = 'myIframe' width = '100%' height = '600px' frameborder = "0"></iframe> -->
        <iframe :src = "appSettingUrl" ref = 'myIframe' width = '100%' height = '600px' frameborder = "0"></iframe>
      </div>
    </el-dialog>
    <!-- <Template-Settings :propsInfo = 'propsInfo' @giveUpSetting = 'giveUpSetting' @sureSetting = 'sureSetting'></Template-Settings> -->
    <!-- 展示的弹窗 -->
    <!-- <el-dialog v-drag :title = 'previewTitle' :visible.sync = 'previewFormVisible' width='95%' class='main_dialog' append-to-body>
      <Show-Meta-Form-Layout :data = "previewPageData"></Show-Meta-Form-Layout>
    </el-dialog> -->
    <!-- 导出页面的弹窗 -->
    <Export-Method :exportDialog = 'exportPageInfo.dialog' :exportTitle = 'exportPageInfo.title' :exportApiRouter = 'exportPageInfo.apiRouter' :type = 'exportPageInfo.type'
    :selectOption = 'totalData' @closeExportOperation = 'exportPageInfo.dialog = false'></Export-Method>
    <!-- 导入页面的弹窗 -->
    <Import-Method :importDialog = 'importPageInfo.dialog' :importTitle = 'importPageInfo.title' :importApiRouter = 'importPageInfo.apiRouter'
    @giveUpImportOperation = 'importPageInfo.dialog = false' @finishedImportOperation = 'finishedImportOperation'></Import-Method>
  </div>
</template>

<script src='./appDynamicPage.js'></script>

<style>
.md_visiableFrame,
.md_visiableFrame .el-dialog,
.md_visiableFrame .el-dialog .el-el-dialog__header,
.md_visiableFrame .el-dialog .el-dialog__body{
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
</style>
